<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script type="text/javascript" src="https://www.jq22.com/demo/JDbanner20151119/js/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box
        }

        .pageBox {
            height: 100vh;
            position: relative;
        }

        .tool {
            position: fixed;
            right: 2vw;
            top: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            transform: translateY(-50%);
        }

        .thumb {
            display: flex;
            flex-direction: column;
        }

        .thumb span {
            background-color: #fff;
            width: 12px;
            height: 12px;
            border-radius: 100%;
            margin:  5px 0;
            cursor: pointer;
        }

        .thumb span.active {
            background-color: #fc0
        }

        .svg {
            position: relative;
            height: 100vh;
        }


        .svg svg {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            max-height: 60%;
        }


        .text h4 {
            font-weight: normal;
        }

        .text h3 {
            font-size: 22px;
            padding-bottom: 12px;
        }
    </style>
</head>

<body>
<div class="pageBox">
    <div class="svg">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
            <polygon></polygon>
            <polygon></polygon>
            <polygon></polygon>
            <polygon></polygon>
            <polygon></polygon>
            <polygon></polygon>
            <polygon></polygon>
            <polygon></polygon>
            <polygon></polygon>
            <polygon></polygon>
            <polygon></polygon>
            <polygon></polygon>
            <polygon></polygon>
            <polygon></polygon>
            <polygon></polygon>
        </svg>
    </div>
    <div class="tool">
        <div class="thumb">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</div>
<script type="text/javascript" src='TweenMax.min.js'></script>
<script type="text/javascript" src='EndArrayPlugin.min.js'></script>
<script type="text/javascript" src="xajh.js"></script>
<script>


</script>
</body>

</html>